<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left" id="search-form">
    <form class="form-search" action="user/search" method="get">
      <div class="input-append">
        <input type="text" class="input-medium search-query" name="word" value="${word!}" placeholder="Search user"
               autofocus>
        <select name="scope" class="input-small">
          <option value="">All</option>
          <option value="name"<#if scope=="name">selected</#if>>Name</option>
          <option value="nick"<#if scope=="nick">selected</#if>>Nick</option>
          <option value="school"<#if scope=="school">selected</#if>>School</option>
          <option value="email"<#if scope=="email">selected</#if>>Email</option>
        </select>
        <button type="submit" class="btn btn-info">Search</button>
      </div>
    </form>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=userList.pageNumber totalPage=userList.totalPage actionUrl="user/search/" urlParas="?${query!}" />
  <div class="pull-right">
    <span class="badge badge-info">${userList.pageNumber}/${userList.totalPage} Pages</span>
    <span class="badge badge-info">${userList.totalRow} Users</span>
  </div>
</div>
<div class="">
  <table id="user-list" class="table table-striped table-condensed">
    <thead>
    <tr>
      <th>No.</th>
      <#if adminUser??>
        <th>UID</th>
      </#if>
      <th>User</th>
      <th>Nick Name</th>
      <th>School</th>
      <th>Solved</th>
      <th>Submit</th>
    </tr>
    </thead>
    <tbody>
      <#if userList??>
        <#list userList.list as User>
        <tr>
          <td>${(userList.pageNumber-1) * userList.pageSize + User_index + 1}</td>
          <#if adminUser??>
            <td>${User.uid!}</td>
          </#if>
          <td class="user"><a href="user/profile/${User.name!}">${User.name!}</a></td>
          <td>${User.nick!}</td>
          <td>${User.school!}</td>
          <td>${User.solved!}</td>
          <td>${User.submission!}</td>
        </tr>
        </#list>
      </#if>
    </tbody>
  </table>
</div>
</@override>

<@override name="scripts">
<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    <#if oj_style != "slate">
      $("#user-list").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: true,
        striped: true,
        clean: true
      });
    </#if>
  });
</script>
</@override>
<@extends name="../common/_layout.html" />
